<%var obj={pageTitle:"电影详细信息"}%>
{{include "../Header.html"}}
<div class='topTitle'>
  <div class="back" onclick="history.back()">
      <img src="../../public/images/back.png" alt="">
  </div>
{{pageData.m_name}}
</div>
<div class="movieItemDetail">
<div class='mask'>
  <img src="{{pageData.m_img}}" alt="">
</div>
<div class='left'>
  <img src="{{pageData.m_img}}" alt="">
</div>
<div class='center'>
  <div class='m_title'>{{pageData.m_nm}}</div>
  <div class='m_type'>{{pageData.m_type}}</div>
  <div class='m_rating'>评分：{{pageData.m_score}}</div>
  <div class='m_src'>{{pageData.play_time}}分钟</div>
  <div class='m_rt'>{{pageData.show_time.toLocaleDateString()}}</div>
</div>
</div>
<div class='section-expander'>
<!-- <div class='buttondiv'>
  立即购票
</div> -->
<div class='m_desc'>{{pageData.m_description}}</div>
</div>
<%var tempData={playInfoList:playInfoList};%>
{{include "./playInfo.html" tempData}}
<style type="text/css">
  .topTitle {
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: #e54847;
    height: 40px;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    position: relative;
  }
  .back
  {
      width: 28px;
      height: 28px;
      position: absolute;
      left: 5px;
      cursor: pointer;
  }
  .back img
  {
      width: 100%;
  }
  .movieItemDetail {
    height: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 7px;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.2);
    position: relative;
    color: white;
    margin: 0;
  }
  .movieItemDetail .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .mask img {
    width: 100%;
    height: 100%;
    filter: blur(30px);
    -webkit-filter: blur(30px);
  }
  
  .movieItemDetail .left {
    width: 110px;
  }
  .movieItemDetail .left > img {
    width: 100%;
    height: auto;
  }
  
  .movieItemDetail .center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 5px;
    font-size: 13px;
  }
  .m_rating {
    color: orange;
  }
  .section-expander {
    padding: 7px;
    box-sizing: border-box;
  }
  .buttondiv {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #e54847;
    color: white;
    font-size: 15px;
    margin: auto;
    padding: 7px;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .buttonViewHover {
    font-weight: bold;
  }
  .m_desc {
    font-size: 14px;
    color: gray;
    text-indent: 2em;
  }
  .m_title {
    font-size: 18px;
  }
  </style>
{{include "../Footer.html"}}